<template>
  <h2>基本信息</h2>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="form"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <!-- 按钮 新增 -->
    <el-form-item>
      <el-button type="danger" @click="sheepWeighedAdd(ruleFormRef)">
        新增
      </el-button>
    </el-form-item>

    <!-- 日期框 测定日期 -->
    <el-form-item label="测定日期：" prop="bodyDate">
      <el-col :span="11">
        <el-date-picker
          v-model="form.bodyDate"
          type="date"
          placeholder="请选择测定日期"
          style="width: 100%"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </el-col>
    </el-form-item>
   <!-- 下拉框 羊只耳号 breedingSheepArchiveId -->
   <el-form-item label="羊只耳号：">
      <el-select v-model="form.earsId" placeholder="请选择羊只耳号">
        <el-option v-for="item in breedingList" :label="item.auricle" :value="item.breedingSheepArchiveId" />
      </el-select>
    </el-form-item>
    <!-- 文本框 身高(cm) -->
    <el-form-item label="身高(cm)：">
      <el-input v-model="form.bodyHeight" />
    </el-form-item>
    <!-- 文本框 体长(cm) -->
    <el-form-item label="体长(cm)：">
      <el-input v-model="form.bodyLong" />
    </el-form-item>
    <!-- 文本框 胸围(cm) -->
    <el-form-item label="胸围(cm)：">
      <el-input v-model="form.bodyShort" />
    </el-form-item>
    <!-- 文本框 管围(cm) -->
    <el-form-item label="管围(cm)：">
      <el-input v-model="form.bodyPipe" />
    </el-form-item>
    <!-- 文本框 阴囊围(cm) -->
    <el-form-item label="阴囊围(cm)：">
      <el-input v-model="form.bodyScrotal" />
    </el-form-item>
    <!-- 文本框 背膘厚度(mm) -->
    <el-form-item label="背膘厚度(mm)：">
      <el-input v-model="form.bodyBackfat" />
    </el-form-item>
     <!-- 文本框 眼肌面积(c㎡) -->
     <el-form-item label="眼肌面积(c㎡)：">
      <el-input v-model="form.bodyEye" />
    </el-form-item>
     <!-- 文本框 眼肌宽度(cm) -->
     <el-form-item label="眼肌宽度(cm)：">
      <el-input v-model="form.bodyEyeWeight" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage } from 'element-plus';
//生命周期 钩子函数
onMounted(() => {
  postBreedingList(); //羊只耳号
});

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const form = reactive({
  bodyDate:'2024-11-19T13:54:15.264Z',
  earsId:'',
  bodyHeight:'',
  bodyLong:'',
  bodyShort:'',
  bodyPipe:'',
  bodyScrotal:'',
  bodyBackfat:'',
  bodyEye:'',
  bodyEyeWeight:''
});

//验证
const rules = reactive({
  bodyDate: [{ required: true, message: "请选择测定日期", trigger: "blur" }],
  earsId: [
    { required: true, message: "请选择羊只耳号", trigger: "change" },
  ],
});

//体尺测定-新增
const sheepWeighedAdd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");

      //发送网络请求
      axios.post('http://localhost:24925/api/Breedings/BodyAdds',{
        bodyDate:form.bodyDate,
        earsId:form.earsId,
        bodyHeight:form.bodyHeight,
        bodyLong:form.bodyLong,
        bodyShort:form.bodyShort,
        bodyPipe:form.bodyPipe,
        bodyScrotal:form.bodyScrotal,
        bodyBackfat:form.bodyBackfat,
        bodyEye:form.bodyEye,
        bodyEyeWeight:form.bodyEyeWeight,
      }).then(res=>{
        console.log(res);
        if(res.data.code==0){
          ElMessage.success('体尺测定信息新增成功!');
          router.push('BodyList');
        }
        else{
          ElMessage.error('体尺测定信息新增失败!');
          return;
        }
      }).catch(err=>{
        console.log(err);
      })

    } else {
      console.log("error submit!", fields);
    }
  });
};

//羊只耳号
const breedingList=ref([]);
const postBreedingList=()=>{
 axios.post('http://localhost:5012/api/SheepFile/BasicInformationList',{}).then(res=>{
  console.log(res);
  breedingList.value=res.data.data;
 })
 .catch(err=>{
  console.log(err);
 })
}
</script>
